<template>
	<div id="importResult">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="cancel()">成绩管理</span>/ 导入结果
		</div>

		<div class="list">
			<div id="sec_1">
				<div>
					<span>本次导入人数</span>
					<br>
					<span class="num">{{importNum}}人</span>
				</div>
				<div>
					<span>本次未导入人数</span>
					<br>
					<span class="num">{{noImportNum}}人</span>
				</div>
			</div>
			<div id="btnBox">
				<el-button class="refresh" type="primary" @click="refresh()">刷新</el-button>
				<el-button class="reImport" type="primary" @click="cancel()">重新导入</el-button>
			</div>
			<div class="list">
				<div class="tableTitle">导入错误记录</div>
				<el-table :data="list" border align="center">
					<el-table-column prop="lineNum" label="行数" width="120">
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="120">
					</el-table-column>
					<el-table-column prop="errorMessage" label="错误信息">
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
					 :total="totalCount" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				totalCount: 0,
				importNum: "0",
				currentPage: 1,
				noImportNum: "0"
			};
		},
		mounted() {
			setTimeout(() => {
				this.getErrorList();
			}, 2000);
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//返回
			cancel() {
				history.back();
			},
			//获取错误信息列表
			getErrorList() {
				let url = this.$util.domain + "/physicaltest/importscore/result";
				this.list = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						pageNum: this.currentPage,
						importId: this.$util.getUrlParam("importId") * 1,
						physicalId: this.$util.getUrlParam("physicalId") * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data.list;
						this.importNum = response.data.data.rightNum;
						this.noImportNum = response.data.data.wrongNum;
						this.totalCount = response.data.data.wrongNum;
						this.list = [];
						if (dataList) {
							if (dataList.length > 0) {
								this.list = dataList;
							}
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//刷新
			refresh() {
				this.getErrorList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getErrorList();
			}
		}
	};
</script>

<style>
	#importResult {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	#importResult .title {
		color: #0398FF;
	}

	#importResult .cancel {
		position: absolute;
		right: 20px;
		background: #333744;
		border-radius: 0;
		color: #fff;
		width: 80px;
		line-height: 36px;
		height: 36px;
		text-align: center;
		display: inline-block;
		cursor: pointer;
		font-size: 14px;
	}

	#importResult #sec_1 {
		width: 70%;
		margin-left: 15%;
		height: 150px;
		text-align: center;
		color: #333333;
		border: solid 1px #b2b2b2;
		margin-top: 85px;
		font-size: 24px;
	}

	#importResult #sec_1>div {
		float: left;
		text-align: center;
		width: 49.5%;
		height: 150px;
		padding-top: 30px;
		box-sizing: border-box;
	}

	#importResult #sec_1>div:first-child {
		width: 50%;
		border-right: solid 1px #b2b2b2;
	}

	#importResult #sec_1 .num {
		color: #0398FF;
		margin-top: 25px;
		display: inline-block;
	}

	#btnBox {
		width: 70%;
		height: 40px;
		position: relative;
		margin: 40px 0 40px 15%;
	}

	#btnBox .reImport {
		position: absolute;
		width: 80px;
		right: 0px;
	}

	#btnBox .refresh {
		position: absolute;
		width: 80px;
		right: 100px;
	}

	#importResult .list {
		width: 70%;
		margin-left: 15%;
	}

	#importResult .tableTitle {
		text-align: center;
		color: #333333;
		font-size: 18px;
		font-family: "Microsoft YaHei";
		margin-bottom: 10px;
	}
</style>